<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入CSS-->
{#<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/webuploader/0.1.1/webuploader.css">#}
{#<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/css/bootstrap.css">#}
{##}
{#<!--引入JS-->#}
{#<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.js"></script>#}
{#<script type="text/javascript" src="https://cdn.staticfile.org/webuploader/0.1.1/webuploader.js"></script>#}
<script type="text/javascript" src="http://www.webhek.com/wordpress/wp-content/uploads/js/canvas2image/canvas2image.js"></script>
    <script src="http://www.webhek.com/wordpress/wp-content/uploads/js/canvas2image/base64.js"></script>
    <style>
    canvas{
        border: 1px solid #c3c3c3;
        position: fixed;
        left: 33%;margin: .25rem 0 0 1.5rem;
        z-index: 1001;
        background-color: #fff;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 6px;}
    {#.back{#}
    {#       position: absolute;#}
    {#        top: 0%;#}
    {#        left: 0%;#}
    {#        width: 100%;#}
    {#        bottom: 0;#}
    {#        background-color: black;#}
    {#        z-index: 1;#}
    {#        -moz-opacity: 0.7;#}
    {#        opacity: .35;#}
    {#    }#}
        #save{
            z-index: 1002;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="back"></div>
<img id="scream" src="http://www.runoob.com/try/demo_source/img_the_scream.jpg" alt="The Scream" width="220" height="277" style="display: none">
<canvas id="myCanvas" width="280" height="350" >
您的浏览器不支持 HTML5 canvas 标签。
</canvas>


<button id="save">保存图片</button>
 <script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="10px '微软雅黑'";
ctx.lineWidth=1;
ctx.paddingLeft=5;
ctx.paddingRight=5;
var str = "假如生活欺骗了你，请不要悲伤！thank you!假如生活欺骗了你，请不要悲伤！thank you!假如生活欺骗了你，请不要悲伤！thank you!"
var lineWidth = 0;
var canvasWidth = c.width;//计算canvas的宽度
var initHeight=15;//绘制字体距离canvas顶部初始的高度
var lastSubStrIndex= 0; //每次开始截取的字符串的索引
for(let i=0;i<str.length;i++){
    lineWidth+=ctx.measureText(str[i]).width;
    if(lineWidth>canvasWidth){
        ctx.fillText(str.substring(lastSubStrIndex,i),2,initHeight);//绘制截取部分
        initHeight+=20;//20为字体的高度
        lineWidth=0;
        lastSubStrIndex=i;
    }
    if(i==str.length-1){//绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex,i+1),2,initHeight);
    }
}
var ctx_time=c.getContext("2d");
ctx_time.fillStyle="#999";
ctx_time.fillText("2018-09-08",2,80);

var ctx_content=c.getContext("2d");
var content='８月３日至８日，受党中央、国务院邀请，６２名来自全国各地科研生产一线的优秀专家人才代表来到北戴河休假。\n' +
    '\n' +
    '美丽的风景、周到的安排、亲切的关怀，让专家们倍感温暖振奋。爱国奋斗的家国情怀与建功立业的壮志雄心同频激荡，在渤海之滨奏出动人的旋律……';

var lineWidth = 0;
var lastSubStrIndex= 0; //每次开始截取的字符串的索引
for(let i=0;i<str.length;i++){
    lineWidth+=ctx.measureText(str[i]).width;
    if(lineWidth>canvasWidth){
        ctx_content.fillText(content.substring(lastSubStrIndex,i),2,initHeight+80);//绘制截取部分
        initHeight+=20;//20为字体的高度
        lineWidth=0;
        lastSubStrIndex=i;
    }
    if(i==str.length-1){//绘制剩余部分
        ctx_content.fillText(content.substring(lastSubStrIndex,i+1),2,initHeight+80);
    }
}
{#var ctx_booter=c.getContext("2d");#}
{##}
{#var img=document.getElementById("scream");#}
{##}
{#img.onload = function() {#}
{#	ctx_booter.drawImage(img,10,200);#}
{#}#}

    	function saveCanvas(pCanvas, strType) {
		var bRes = false;
		if (strType == "PNG")
			bRes = Canvas2Image.saveAsPNG(c);
		if (strType == "BMP")
			bRes = Canvas2Image.saveAsBMP(c);
		if (strType == "JPEG")
			bRes = Canvas2Image.saveAsJPEG(c);

		if (!bRes) {
			alert("Sorry, this browser is not capable of saving " + strType + " files!");
			return false;
		}
	}

function base64Img2Blob(code){

        var parts = code.split(';base64,');

        var contentType = parts[0].split(':')[1];

        var raw = window.atob(parts[1]);

        var rawLength = raw.length;



        var uInt8Array = new Uint8Array(rawLength);



        for (var i = 0; i < rawLength; ++i) {

         uInt8Array[i] = raw.charCodeAt(i);

        }



        return new Blob([uInt8Array], {type: contentType});

      };

function downloadFile(fileName, content){



        var aLink = document.createElement('a');

        var blob = base64Img2Blob(content); //new Blob([content]);



        var evt = document.createEvent("HTMLEvents");

        evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错

        aLink.download = fileName;

        aLink.href = URL.createObjectURL(blob);



        aLink.dispatchEvent(evt);

      };

downloadFile('ship.png', canvas.toDataURL("image/png"))
 </script>
</body>
</html>